<template>
    <div>
        <div v-show="!this.$route.params.courseId">
            <el-steps :active="1" finish-status="success" simple>
                <el-step title="1.填写课程信息" ></el-step>
                <el-step title="2.上传课程内容" ></el-step>
                <el-step title="3.提交审核" ></el-step>
            </el-steps>
        </div>
    <el-divider></el-divider>
        <el-form ref="form" :model="formData"  label-width="80px" :rules="formRules">
            <div style="width: 500px">
                <el-form-item label="课程名称" prop="title">
                    <el-input v-model="formData.title" style="width: 400px"></el-input>
                </el-form-item>
            </div>
            <div style="width: 300px">
                <el-form-item label="课程分类" prop="subjectId">
                    <el-cascader
                            @change="setSubjectId"
                            placeholder="试试搜索"
                            :options="options"
                            :props="{value:'id',label:'title',}"
                            :clearable="true"
                            v-model="checkSubjectId"
                            filterable>
                    </el-cascader>
                </el-form-item>
            </div>
            <div style="width: 700px">
                <el-form-item label="课程介绍"  prop="description">
                    <el-input type="textarea" v-model="formData.description"></el-input>
                </el-form-item>
            </div>
            <div style="width: 300px">
                <el-form-item label="是否免费">
                    <el-radio-group v-model="radio">
                        <el-radio :label="1" @click="priceClear">免费</el-radio>
                        <el-radio :label="0">付费</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div style="width: 300px">
                <el-form-item label="课程售价" v-if="radio==1"  prop="price">
                    <el-input v-model="formData.price" style="width: 200px"></el-input>
                </el-form-item>
            </div>

            <div style="width: 250px">
                <el-form-item label="课程封面" prop="cover">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9000/core/teacher/upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="formData.cover" :src="formData.cover" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </div>


            <el-form-item label="课程封面" style="display: none" prop="cover">
                <el-input v-model="formData.cover" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="submit()">提交</el-button>
                <el-button type="danger" @click="$router.push({name:'lbgl'})">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "add",
        data(){
            return{
                token:{token:sessionStorage.getItem("token")},
                quillUpdateImg: false,
                radio:0,
                checkSubjectId:[],
                //表单数据
                formData:{
                    id:'',
                    title:'',
                    cover:'',
                    price:0.00,
                    description:'',
                    subjectId:[],
                },
                //下拉框数据
                options: [],
                //头部
                active: 0,

                //表单校验
                formRules:{
                    title:[
                        {required:true,message:'请输入课程名称',trigger:'blur'},
                    ],
                    price:[
                        {required:true,message:'请输入课程价格',trigger:'blur'},
                    ],
                    description:[
                        {required:true,message:'请输入课程简介',trigger:'blur'},
                    ],
                    subjectId:[
                        {required:true,message:'请选择课程类型',trigger:'blur'},
                    ],
                    cover:[
                        {required:true,message:'请选择课程封面',trigger:'blur'},
                    ],
                },
            }
        },
        created() {
            this.initSelect();
            this.formData.id = this.$route.params.courseId;
            this.initForm(this.formData.id);
        },
        methods:{
            initForm(id){
                if (id==="" || id===undefined){
                    return;
                }
                this.$http.get(`core/course/findCourseById/${id}`).then((resp) => {
                    if (resp.data.code===2000){
                        this.checkSubjectId.push(resp.data.result.subjectParentId);
                        this.checkSubjectId=resp.data.result.subjectIds;
                        this.formData=resp.data.result;
                        this.formData.subjectId=this.checkSubjectId;
                        if (resp.data.result.price>0){
                            this.radio=1;
                        }
                    }
                })
            },
            //上传图片成功
            //图片上传成功后执行
            handleAvatarSuccess(res, file){
                this.formData.cover=res;
            },
            beforeAvatarUpload(file) {

                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            //表单提交
            submit(){
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.formData.id==="" || this.formData.id===undefined){
                            this.$http.post('core/course/insertCourse', this.formData).then((resp) => {
                                console.log(resp.data.result);
                                if (resp.data.code === 2000) {
                                    this.$message.success(resp.data.msg);
                                    this.$router.push({
                                        name:'chapter',
                                        params:{
                                            courseId:resp.data.result
                                        }
                                    });
                                } else {
                                    this.$message.error(resp.data.msg);
                                }
                            })
                        }else {
                            const data = this.formData;
                            this.$http.post(`/core/course/updateCourseById/${this.formData.id}`,this.formData).then((resp) => {
                                if (resp.data.code === 2000) {
                                    this.$message.success(resp.data.msg);
                                    this.$router.push({name:'lbgl'});
                                } else {
                                    this.$message.error(resp.data.msg);
                                }
                            })
                        }
                    }
                })
            },
            //初始化级联选择器
            initSelect(){
                this.$http.post('core/subject/getSubjects').then((resp) => {
                    const list = resp.data.result;
                    for (let i = 0; i < list.length; i++) {
                        this.clearChildren(list[i]);
                    }
                    this.options=list;
                })
            },
            //清空空的子级
            clearChildren(option){
                if (option.children.length==0)
                    option.children=undefined;
                else {
                    for (let i = 0; i < option.children.length; i++) {
                        this.clearChildren(option.children[i]);
                    }
                }
            },
            //设置课程类型id
            setSubjectId(values){
                this.formData.subjectId=values;
            },
            //点击免费
            priceClear(){
                this.formData.price=1;
            },

        },
    }
</script>
<style>
    .avatar-uploader{
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<style scoped>

</style>